<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: 0.5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <div id="app">
      <form action="">
        <input v-model="nickname" type="text">
        <button @click.prevent="handleNickname"></button>
      </form>

      
      <!-- 消息列表 -->
      <ul id="messages">
        <li
          v-for="(item, index) in messageList"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>

      <!-- 发送消息的表单 -->
      <form action="">
        <div style="border: 1px solid #000;">
          <input v-model="nickname" type="text">
          <button @click.prevent="handleNickname">昵称</button>
        </div>
        <!-- 广播 -->
        <input
          v-model="message"
          autocomplete="off"
        />
        <button
          @click.prevent="handleSend"
        >广播</button>
        <!-- 私聊 -->
        <div style="border: 1px solid #000;">
          <input v-model="privateMessage" type="text">
          <input v-model="privateUser" type="text">
          <button @click.prevent="handlePrivateMessage">私聊</button>
        </div>
      </form>
    </div>

    <!-- 加载 socket.io 客户端 -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script>
      // WebSocket 通过 HTTP 协议建立连接
      // 建立连接成功后使用 WebSocket 进行通信
      const socket = io()

      // 接收服务端消息
      // socket.on('hello', data => {
      //   console.log(data)
      // })

      socket.on('connect', () => {
      })

      const app = new Vue({
        el: '#app',
        data: {
          message: '',
          messageList: [], // 消息列表
          nickname: '',
          privateMessage: '',
          privateUser: ''
        },
        created () {
          socket.on('message', data => {
            // console.log('message => ', data)
            this.messageList.push(`${data.nickname}说：${data.message}`)
          })

          socket.on('chat-count', count => {
            this.messageList.push(`当前在线人数：${count}`)
          })

          socket.on('private-message', data => {
            console.log('private-message', data)
            this.messageList.push(`${data.nickname} 对你说：${data.message}`)
          })
        },
        methods: {
          // 发送消息
          handleSend () {
            socket.emit('message', this.message)
          },

          handleNickname () {
            socket.emit('nickname', this.nickname)
          },

          handlePrivateMessage () {
            socket.emit('private-message', {
              privateUser: this.privateUser,
              privateMessage: this.privateMessage
            })
          }
        }
      })
    </script>
  </body>
</html>
